<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta name="author" content="xsl">
        <script src="jquery-3.1.1.js"></script>
        <title></title>
        <style>
            .outer{
                width: 600px;
                margin: 50px auto;
            }
            .top{
                color: dodgerblue;
            }
            textarea{
                margin: 0;
                padding: 0;
                width: 568px;
                height: 80px;
                line-height: 18px;
                overflow: hidden;
                outline: none;
                border-style: none;
                border: 1px solid #aaa;
                padding: 5px;
                resize: none;
            }
            .count{
                float: right;
                margin-right: 30px;
                color: #666;
            }
        </style>
    </head>
    <body>
        <div class="outer">
            <div class="top">
                <span>有什么新鲜事想告诉大家吗</span>
                <span class="count"></span>
            </div>
            <form class="input">
                <textarea id="text"></textarea>
            </form>
        </div>
    </body>
</html>
<script>

    $('#text').focus(function(){
        $(this).css('border','1px solid #f93')
    })
    $('#text').blur(function(){
        $(this).css('border','1px solid #ccc')
    })
    // 绑定 keyup change事件
    $('#text').bind('keyup change',(
    
    // 英文,数字,两个算一个一字符
    function textNum(){
        // 获取输入的字数,
        var shu = $('#text').val().length
        var current = 0;
        if(shu > 0){
            for(var i=0;i<shu;i++){
                if($(this).val().charCodeAt(i)>225){
                   // 中文字符   
                   current +=1 
                }else{
                   // 英文字符 
                   current +=0.5  
                }
            }
            var result = Math.ceil(current);
        // 显示输入的字数
        $('.count').html('已输入<b>'+result+'</b>字');
        // 判断字数是否大于140
         if(result >=140){
            $('b').css('color','#f62')
         }
        }
    }))
</script>